<!--
  模块：一键求助 - 求助一览 - 修改
-->
<template>
  <div class="help-overview-edit">
    <!-- 一键求助 - 求助一览 - 修改 -->
       <el-form label-position="top" :model="formParams" :rules="rules" ref="formParams" >

     <!-- 头部 -->
      <el-form-item class="header">
          <el-button type="primary" @click="saveForm('formParams')">保存</el-button>
          <el-button type="primary" @click="submitForm('formParams')">提交</el-button>
      </el-form-item>

     <!-- 内容 -->
      <div class="content">
         <el-row :gutter="20">
        <el-col :span="12" class="contents">
              <div class="left">

                  <CardFormTitle title="企业信息"></CardFormTitle>

                  <CardFormContent>

                    <el-form-item  label="企业名称">
                        <el-input
                            v-model="formParams.companyName"
                            clearable
                            disabled
                          />
                    </el-form-item>

                    <el-col :span="12">
                      <el-form-item  label="社会信用代码">
                          <el-input
                              v-model="formParams.creditCode"
                              clearable
                              disabled
                          />
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item  label="企业分类">
                          <el-input
                              v-model="formParams.companyType.desc"
                              clearable
                              disabled
                          />
                      </el-form-item>
                    </el-col>
                  </CardFormContent>

                  <div>
                  <CardFormTitle title="问题述求"></CardFormTitle>
                  </div>

                  <CardFormContent>



                  <el-col :span="12">
                    <el-form-item  label="求助类型"  prop="helpType">
                      <el-select
                            v-model="formParams.helpType"
                            placeholder="求助类型"
                            >
                          <el-option
                                v-for="dict in pulldown.helpType"
                                :key="dict.value"
                                :label="dict.desc"
                                :value="dict.value"
                            />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item  label="求助时间">
                        <el-date-picker
                            v-model="formParams.helpTime"
                            type="datetime"
                            clearable
                            disabled
                          />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item  label="问题和述求描述" prop="queDes">
                        <el-input
                            v-model="formParams.queDes"
                            clearable
                            type="textarea"
                            maxlength="1000"
                            show-word-limit

                          />
                    </el-form-item>
                  </el-col>
                  </CardFormContent>


              </div>

            </el-col>
         </el-row>
          </div>

      </el-form>
  </div>
</template>

<script>
 // 样式
  import CardFormContent from "@/components/card-form-content"
  // 样式
  import CardFormTitle from "@/components/card-form-title"
    // 详情数据请求
  import { detailsdata } from '@/api/help/input'

  import { pulldown, updateHelp ,modifyOverview} from '@/api/help/overview'

export default {
  name: 'HelpOverviewEdit',
    created() {
      // 获取头部表单下拉数据
      this.getPulldown(),

      this.details();

    },

    data(){
      return {
        formParams:{
            id:this.$route.query.id,
            helpType:undefined,
        },

         // 数据校验
        rules:{
            queDes:[
               { required: true, message: '请输入问题和述求描述', trigger: 'blur' },
               { min: 1, max: 1000, message: '长度在 1 到 1000 个字符', trigger: 'blur' }
            ]

      }
      }
    },


    methods:{

      // 获取头部表单下拉数据
      getPulldown(){
            pulldown().then((responseOne)=>{
            this.pulldown = responseOne.data;
        })
      },

      // 获取详情数据
      details(){
          detailsdata(this.$route.query.id).then((respone)=>{

              this.formParams = { ...respone.data}

              this.formParams.helpType = respone.data.helpType.value
              this.enterResultdata = respone.data.enterResult.desc

          })
      },

        // 数据保存
      saveForm(formParams) {
        this.$refs[formParams].validate((valid) => {
          if (valid) {
            updateHelp(this.formParams).then((Response)=>{
                this.$router.push({
                 name:"HelpOverview"
                })
            window.location.reload()
          })

            console.log(this.formParams)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },


      // 数据提交
      submitForm(formParams){
        this.$refs[formParams].validate((valid) => {
          if (valid) {
            let type = 1
            this.formParams.companyType = type
            modifyOverview(this.formParams).then((Response)=>{
                this.$router.push({
                 name:"HelpOverview"
                })
            window.location.reload()
          })


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

  },

}
</script>


<style lang="scss" scoped>
  .header{
    width: 100%;
    padding: 10px;
    padding-right: 20px;
    background-color: white;
    text-align: right;
  }


  .content {
    width: 100%;
    height: 700px;
    padding-top: 24px;
    padding-left: 48px;
    padding-right: 48px;

    & .contents{
    border:20px solid rgb(226, 232, 240);
    height: 623px;
    background-color: rgb(255, 255, 255);
    text-align: left;
  }

  }


  .left{
    text-align: left;
  }

  .card-form-title{
    margin-top: 40px;
    padding-left: 10px;

  }

  .card-form-content{
      height:165px;
      width: 60%;
      margin-left: 20px;
  }

  .right-content{
    height: 75px;
  }

  .righttwo{
    height: 240px;
  }






</style>

